// pie3dOption.ts
import _ from 'lodash';
import { EChartsOption, SeriesOption } from 'echarts';
import 'echarts-gl';
import * as echarts from 'echarts';
// ===========      年龄柱状图       =============
interface DataItem {
  measureUnit: string
  value: number
}

export function getAgeBarOption(
  xAxisData: string[],
  seriesData: DataItem[]
): EChartsOption {
  const maxAmount = Math.max(...seriesData.map(item => item.value))
  const maxValArr = new Array(seriesData.length).fill(maxAmount)

  return {
    backgroundColor: "#ffffff",
    legend: {
      show: false,
      icon: "rect",
      textStyle: {
        color: "#536dfe",
      },
    },
    grid: {
      top:'20%',
      bottom:'5%',
      right:'5%',
      left:'5%',
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        fontSize: 11,
        color: "#606266",
        interval: 0,
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#e0e6f1",
        },
      },
      data: xAxisData,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        fontSize: 11,
        color: "#606266",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#e0e6f1",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#f0f2f5",
        },
      },
    },
    series: [
      {
        name: "全量背景图",
        type: "bar",
        barGap: "-100%",
        data: maxValArr,
        barWidth: 30,
        itemStyle: {
          color: "rgba(83, 109, 254, 0.1)",
        },
        z: 0,
      },
      {
        type: "pictorialBar",
        name: "渐变背景",
        barWidth: 14,
        symbol: "rect",
        symbolSize: "100%",
        symbolPosition: "start",
        symbolOffset: [0, 0],
        label: {
          show: true,
          position: "top",
          formatter: (params: any) => {
            const item = seriesData[params.dataIndex]
            return `${item.value}\n${item.measureUnit}`
          },
          fontSize: 12,
          lineHeight: 16,
          color: "#536dfe",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "rgba(83, 109, 254, 1)" },
            { offset: 0.5, color: "rgba(111, 134, 255, 0.8)" },
            { offset: 1, color: "rgba(140, 158, 255, 0.5)" },
          ]),
        },
        z: 1,
        zlevel: 0,
        data: seriesData.map(item => item.value),
      },
      {
        type: "pictorialBar",
        name: "块状切片",
        itemStyle: {
          color: "#ffffff",
        },
        barWidth: 14,
        symbolRepeat: 28,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [14, 2],
        symbolPosition: "start",
        symbolOffset: [0, 0],
        data: seriesData.map(item => item.value),
        z: 2,
        zlevel: 0,
      },
    ],
  }
}


//=========== 自知力柱状图 ===========
export function getInsightBarChartOption(
  xAxisData: string[],
  seriesData: number[]
): EChartsOption {
  return {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(83, 109, 254, 0.7)",
      textStyle: {
        color: "#fff",
      },
      borderColor: "#536dfe",
      axisPointer: {
        lineStyle: {
          color: "transparent",
        },
      },
    },
    legend: {
      show:false,
      icon: 'rect',
      right: "0%",
      top: '2%',
      itemWidth: 7,
      itemHeight: 7,
      itemGap: 15,
      textStyle: {
        color: '#606266',
        fontSize: 12
      }
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#e0e6f1"
        }
      },
      axisTick: { show: false },
      axisLabel: {
        color: '#606266',
        fontSize: 12,
        interval: 0
      }
    },
    yAxis: [
      {
        name: '个',
        type: "value",
        inverse: false,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#f0f2f5',
            type: 'dashed'
          }
        },
        axisLine: { show: true, lineStyle: { color: "#e0e6f1" } },
        axisTick: { show: false },
        axisLabel: {
          formatter: '{value}',
          color: '#606266'
        },
        nameTextStyle: {
          color: '#606266',
          padding: [0, 0, 0, -15]
        }
      }
    ],
    series: [
      {
        name: '自知力',
        type: 'bar',
        barWidth: 8,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(83, 109, 254, 0.9)' },
            { offset: 1, color: 'rgba(83, 109, 254, 0.3)' }
          ])
        },
        data: seriesData
      },
      {
        name: '自知力',
        type: 'bar',
        barWidth: 10,
        barGap: 0,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(140, 158, 255, 0.5)' },
            { offset: 1, color: 'rgba(140, 158, 255, 0.1)' }
          ])
        },
        data: seriesData,
        tooltip: { show: false }
      },
      {
        name: '自知力',
        type: 'pictorialBar',
        symbolSize: [20, 6],
        symbolOffset: [0, -4],
        symbolPosition: 'end',
        symbol: 'diamond',
        z: 12,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(83, 109, 254, 1)' },
            { offset: 1, color: 'rgba(140, 158, 255, 0.7)' }
          ])
        },
        tooltip: { show: false },
        data: seriesData
      }
    ]
  }
}


//======= 性别饼图  ======
interface NormalData {
  zbPercentValue: number;
  zbTitle: string;
  name: string;
  Attributes: {
    MAINDIMMEMBER_NAMECOLUMN: string;
    MAINDIMMEMBER_KEYCOLUMN: string;
    MAINDIM_NAMECOLUMN: string;
    MAINDIM_KEYCOLUMN: string;
    C_ZBNAME: string;
    DRILL_DOWN: string;
  };
  itemStyle: {
    color: string;
  };
  label: {
    color: string;
  };
  value: number;
}

export function getGenderPieChartOption(normaldata: NormalData[]): EChartsOption {
  const colorList = [
    'rgba(6, 194, 255, 1)',  // 男
    'rgba(255, 205, 40, 1)',  // 女
  ];

  const colorList1 = [];
  const colorList2 = [];
  colorList.forEach((item) => {
    colorList1.push(item);
    colorList1.push('');
    colorList2.push(item.replace(/,\s*\d+(\.\d+)?\)/, ", 0.3)"));
    colorList2.push('');
  });

  let sum = 0;
  const valdata: { value: number; name: string }[] = [];

  normaldata.forEach((item) => {
    sum += Number(item.value);
  });

  normaldata.forEach((item) => {
    valdata.push({ value: item.value, name: item.name });
    // 配置一个空值
    valdata.push({
      name: '',
      value: sum / 100,
      itemStyle: { color: 'transparent' },
    });
  });

  return {
    backgroundColor: "#ffffff",
    legend: {
      orient: 'horizontal',
      left: 'center',
      bottom: 20,
      icon: 'none',
      width: 450,
      itemWidth: 6,
      itemHeight: 6,
      formatter: (name) => {
        const obj = normaldata.find((item) => item.name === name);
        const arr = [`{iconName|}{name|${name}}`];
        return arr.join('');
      },
      textStyle: {
        color: '#606266',
        fontSize: 12,
        rich: {
          name: {
            color: '#606266',
            fontSize: 12,
            width: 100,
            padding: [0, 0, 0, 10],
          },
        },
      },
      data: normaldata.map((dItem, dIndex) => {
        return {
          ...dItem,
          textStyle: {
            rich: {
              iconName: {
                width: 8,
                height: 8,
                backgroundColor: colorList[dIndex % colorList.length],
              },
              percent: {
                color: colorList[dIndex % colorList.length],
              },
            },
          },
        };
      }),
    },

    series: [
      {
        type: 'pie',
        zlevel: 3,
        radius: ['40%', '48%'],
        center: ['50%', '40%'],
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList2[params.dataIndex % colorList2.length];
            },
          },
        },
        label: { show: false },
        data: valdata,
      },
      {
        type: 'pie',
        zlevel: 1,
        silent: true,
        radius: ['48%', '50%'],
        center: ['50%', '40%'],
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList1[params.dataIndex % colorList1.length];
            },
          },
        },
        label: {
          padding: [0, -40],
          alignTo: 'labelLine',
          formatter: (params) => {
            return params.name
              ? `{dot|}   {d|${params.name}}\n\n{c|${params.value}人}`  // 修改为"50人"
              : ``;
          },
          rich: {
            c: {
              color: '#303133',
              fontSize: 14,
              lineHeight: 20,
              margin: 20,
            },
            d: {
              fontSize: 14,
              color: '#606266',
            },
            dot: {
              backgroundColor: 'auto',
              width: 0,
              height: 0,
              borderRadius: 3,
              fontSize: 16,
              padding: [3, -3, 3, -3],
            },
          },
        },
        labelLine: { length: 30, length2: 50 },
        data: valdata,
      },
      {
        type: 'pie',
        radius: ['57%', '57.3%'],
        center: ['50%', '40%'],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
          normal: {
            shadowBlur: 1,
            shadowColor: 'rgba(15, 79, 150,0.61)',
            color: 'rgba(255,255,255,.3)',
          },
        },
        label: { show: false },
        data: [0],
      },
      {
        type: 'pie',
        radius: ['57%', '57.9%'],
        center: ['50%', '40%'],
        hoverAnimation: false,
        clockWise: false,
        color: ['#55c2e200', 'rgba(6, 192, 252, 1)', '#ff5a6100', 'ff5a6100'],
        label: { show: false },
        data: [30, 10, 240, 30],
      },
      {
        type: 'pie',
        radius: ['57%', '57.9%'],
        center: ['50%', '40%'],
        hoverAnimation: false,
        clockWise: false,
        label: { show: false },
        data: [170, 15, 240, 30],
      },
      {
        type: 'pie',
        radius: ['57%', '57.9%'],
        center: ['50%', '40%'],
        hoverAnimation: false,
        clockWise: false,
        label: { show: false },
        data: [250, 15, 130, 30],
      },
      {
        type: 'pie',
        radius: ['57%', '57.9%'],
        center: ['50%', '40%'],
        hoverAnimation: false,
        clockWise: false,
        label: { show: false },
        data: [250, 10, 10, 20],
      },
    ],
  };
}


// import bgImage from '@/assets/patient/home/data-pie-bg.png';
// export function getRiskLevelPieChartOption(trafficWay: { name: string; value: number }[]): EChartsOption {
//   const color = ['#00ffff', '#00cfff', '#006ced', '#ffe000', '#ffa800', '#ff5b00', '#ff3000'];
//   const data = [];
  
//   // 遍历 trafficWay 数据构建图表的数据项
//   for (let i = 0; i < trafficWay.length; i++) {
//     data.push({
//       value: trafficWay[i].value,
//       name: trafficWay[i].name,
//       itemStyle: {
//         normal: {
//           borderWidth: 10,
//           shadowBlur: 20,
//           borderColor: color[i],
//           shadowColor: color[i]
//         }
//       }
//     }, {
//       value: 2,
//       name: '',
//       itemStyle: {
//         normal: {
//           label: {
//             show: false
//           },
//           labelLine: {
//             show: false
//           },
//           color: 'rgba(0, 0, 0, 0)',
//           borderColor: 'rgba(0, 0, 0, 0)',
//           borderWidth: 0
//         }
//       }
//     });
//   }

//   // 配置项
//   const seriesOption = [{
//     name: '',
//     type: 'pie',
//     clockWise: false,
//     radius: [100,100],
//     hoverAnimation: false,
//     itemStyle: {
//       normal: {
//         label: {
//           fontSize: 12,
//           show: true,
//           position: 'outside',
//           color: '#ddd',
//           formatter: function (params) {
//             let percent = 0;
//             let total = 0;
//             for (let i = 0; i < trafficWay.length; i++) {
//               total += trafficWay[i].value;
//             }
//             percent = (params.value / total) * 100;  // 计算百分比
//             if (params.name !== '') {
//               return `${params.name} ${percent.toFixed(2)}%`;
//             } else {
//               return '';
//             }
//           },
//         },
//         labelLine: {
//           length: 15, // 调整线条长度
//           length2: 15, // 调整线条长度
//           show: true,
//           color: '#00ffff'
//         }
//       }
//     },
//     data: data
//   }];

//   return {
//     backgroundColor: '#0A2E5D',
//     color: color,
//     title: {
//       text: '危险程度',
//       top: '45%', // 调整标题位置
//       textAlign: 'center',
//       left: '50%',
//       textStyle: {
//         color: '#fff',
//         fontSize: 14,
//         fontWeight: '400'
//       }
//     },
//     graphic: {
//       elements: [{
//         type: 'image',
//         z: 2,
//         style: {
//           image: bgImage,
//           width: 120, // 调整图片宽度
//           height: 60 // 调整图片高度
//         },
//         left: 'center',
//         top: 'center'
//       }]
//     },
//     legend: {
//       show:false,
//       icon: 'circle',
//       orient: 'horizontal',
//       bottom: '5%', // 调整图例位置
//       data: ['0级', '1级', '2级', '3级', '4级','5级'],
//       align: 'center',
//       textStyle: {
//         color: '#fff'
//       },
//       itemGap: 15 // 调整图例间距
//     },
//     tooltip: {
//       show: false
//     },
//     toolbox: {
//       show: false
//     },
//     series: seriesOption
//   };
// }
//=========危险程度饼图=======

export function getRiskLevelPieChartOption(xAxisData: any,seriesData:any): EChartsOption {
  const getSymbolData = (datas: number[]) => {
    return datas.map(item => {
      return {
        value: item,
        symbolPosition: 'end' as const,
      }
    })
  }

  const option: echarts.EChartsOption = {
    backgroundColor: "#ffffff",
    grid: {
      left: 37,
      right: 37,
      bottom: 15,
      top: 30,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(83, 109, 254, 0.7)",
      textStyle: {
        color: "#fff",
      },
      borderColor: "#536dfe",
      axisPointer: {
        lineStyle: {
          color: "transparent",
        },
      },
      formatter(params: any) {
        const data = params[0];
        return `${data.marker}${data.name}：${data.value}人`;
      },
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: {
        show: false,
        lineStyle: {
          color: '#007eff4d',
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#466b8b4d',
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: '#466b8b4d',
        },
      },
      axisLabel: {
        show: true,
        color: '#606266',
        fontSize: 14,
      },
    },
    yAxis: [
      {
        type: 'value',
        nameTextStyle: {
          fontSize: 14,
          padding: [0, 0, 34, 15],
          color: '#606266',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#466b8b4d',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          color: '#606266',
          fontSize: 14,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#466b8b4d',
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        data: seriesData,
        barWidth: 15,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#2352CC' },
            { offset: 0.5, color: '#3CB6FF' },
            { offset: 1, color: '#94D4FF' },
          ]),
        },
        label: {
          show: true, // 显示数字
          position: 'top', // 数字显示在柱状图顶部
          fontSize: 14, // 字体大小
          color: '#000', // 字体颜色
          formatter: '{c}人', // 显示数据值
        },
      },
      {
        type: 'pictorialBar',
        symbol: 'rect', // 注意：原来写了 react，应该是 rect（矩形），修正了
        symbolSize: [15, 3],
        symbolOffset: [0, -2],
        z: 12,
        itemStyle: {
          color: '#45FDF9',
          shadowColor: 'rgba(252, 194, 50, 1)',
          shadowBlur: 20,
        },
        data: getSymbolData(seriesData),
      },
    ],
  };

  return option;
}


//=============目前症状饼图 ===========
// useAutoScrollBarChart.ts
interface ChartData {
  label: string[];
  value: number[];
}

interface DataZoomMove {
  start: number;
  end: number;
}

export function getCirclePieOption(data: ChartData) {
  const dataZoomMove: DataZoomMove = {
    start: 0,
    end: 5,
  };

  let dataZoomMoveTimer: number | undefined = undefined;

  const getOption = () => {
    return {
      backgroundColor: '#ffffff',
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(83, 109, 254, 0.7)",
        textStyle: {
          color: "#fff",
        },
        borderColor: "#536dfe",
        axisPointer: {
          lineStyle: {
            color: "transparent",
          },
        },
      },
      dataZoom: [
        {
          show: false,
          startValue: dataZoomMove.start,
          endValue: dataZoomMove.end,
          yAxisIndex: [0, 1],
        },
        {
          type: "inside",
          yAxisIndex: 0,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        },
      ],
      grid: {
        containLabel: true,
        bottom: 20,
        left: 30,
        top: 20,
        right: 30,
      },
      xAxis: {
        type: "value",
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: [
        {
          type: "category",
          data: data.label,
          inverse: true,
          axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 36,
            margin: 2,
            formatter: (value: string) => {
              const k = data.label.indexOf(value);
              const index = k < 9 ? "0" + (k + 1) : k + 1;
              return `{b|${index}} {a|${value}}`;
            },
            rich: {
              b: {
                borderColor: "#a0a0a0",
                borderWidth: 1,
                padding: [3, 1, 0, 1],
                color: "#303133",
                fontSize: 14,
              },
              a: {
                fontSize: 14,
                color: "#606266",
                padding: [4, 0, 0, 8],
              },
            },
          },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
        {
          type: "category",
          data: data.label,
          inverse: true,
          axisLabel: {
            inside: true,
            verticalAlign: "bottom",
            lineHeight: 34,
            margin: 2,
            formatter: (value: string) => {
              const k = data.label.indexOf(value);
              return `{a|${data.value[k]}}`;
            },
            rich: {
              a: {
                fontSize: 16,
                color: "#303133",
                padding: [4, 0, 0, 0],
                fontFamily: "DOUYU",
              },
            },
          },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false },
        },
      ],
      series: [
        {
          data: data.value,
          type: "bar",
          barWidth: 6,
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(83, 109, 254, 0.1)',
            borderRadius: 5
          },
          itemStyle: {
            borderRadius: 50,
            color: "#536dfe",
          },
        },
      ],
    };
  };

  const startMove = (chartInstance: echarts.ECharts) => {
    if (dataZoomMoveTimer) {
      clearInterval(dataZoomMoveTimer);
    }
    dataZoomMoveTimer = window.setInterval(() => {
      dataZoomMove.start += 1;
      dataZoomMove.end += 1;
      if (dataZoomMove.end > data.value.length - 1) {
        dataZoomMove.start = 0;
        dataZoomMove.end = 5;
      }
      chartInstance.setOption({
        dataZoom: [
          {
            startValue: dataZoomMove.start,
            endValue: dataZoomMove.end,
          },
        ],
      });
    }, 3000);
  };

  const stopMove = () => {
    if (dataZoomMoveTimer) {
      clearInterval(dataZoomMoveTimer);
      dataZoomMoveTimer = undefined;
    }
  };

  return {
    getOption,
    startMove,
    stopMove,
  };
}



//===========  既往危险条形图   ==============
export function getPreviousRiskBarOption(information: {
  color: string;
  area: string[];
  dataArray: number[];
}): EChartsOption {
  const style = {
    width: 32,
    height: 24,
    padding: [5, 6, 0, 0],
    fontSize: 20,
    align: 'center',
    color: '#ffffff'
  };

  return {
    backgroundColor: "#ffffff",
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(83, 109, 254, 0.7)",
      textStyle: {
        color: "#fff",
      },
      borderColor: "#536dfe",
      axisPointer: {
        lineStyle: {
          color: "transparent",
        },
      },
      formatter: function (params: any) {
        return `${params[0].name}&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-weight:bold;color:#fff">${params[0].value}人</span>`;
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        show: false
      }
    ],
    yAxis: [
      {
        type: 'category',
        splitLine: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        inverse: true,
        data: information.area,
        axisLabel: {
          color: '#606266',
          margin: 10,
          formatter: (name: string, index: number) => {
            return `{nameStyle|${name}}`
          },
          rich: {
            nameStyle: {
              padding: [0, 10, 0, 2],
              fontSize: 16,
              color: '#606266'
            },
          }
        }
      },
      {
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          color: '#536dfe',
          fontSize: 16,
          margin: 20,
          formatter: (value: number) => `${value}人`
        },
        data: information.dataArray
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: 10,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(83, 109, 254, 0.1)',
          borderRadius: 5
        },
        data: information.dataArray.map(value => ({
          value,
          itemStyle: {
            borderRadius: 5,
            color: '#536dfe'
          }
        }))
      },
      {
        type: 'scatter',
        emphasis: { scale: false },
        symbol: 'rect',
        itemStyle: {
          barBorderRadius: [30, 0, 0, 30],
          color: '#fff',
          shadowColor: '#fff',
          shadowBlur: 1,
          borderWidth: 1,
          opacity: 1
        },
        symbolSize: [4, 10],
        z: 2,
        data: information.dataArray
      }
    ]
  };
}


//==========随访情况仪表盘=======
export function getDualHalfGaugeOption(status:any): EChartsOption {
  return {
    backgroundColor: '#ffffff',
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '30%',
        style: {
          text: status[0]?.name || '管理',
          fontSize: 22,
          fill: '#606266',
        },
      },
      {
        type: 'text',
        left: 'center',
        top: '65%',
        style: {
          text: status[1]?.name || '失访',
          fontSize: 22,
          fill: '#606266',
        },
      },
    ],
    series: [
      {
        name: '上半圆背景刻度',
        type: 'gauge',
        radius: '70%',
        center: ['50%', '50%'],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 10,
        z: 1,
        axisLine: { show: false },
        axisTick: {
          show: true,
          splitNumber: 5,
          length: 30,
          distance: -30,
          lineStyle: { color: '#999', width: 1 },
        },
        splitLine: {
          show: true,
          length: 30,
          distance: -30,
          lineStyle: { color: '#999', width: 1 },
        },
        axisLabel: { show: false },
        detail: { show: false },
        pointer: { show: false },
        data: [{ value: 0 }],
      },
      {
        name: '',
        type: 'gauge',
        radius: '75%',
        center: ['50%', '50%'],
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 100,
        splitNumber: 10,
        z: 2,
        axisLine: {
          lineStyle: {
            width: 35,
            color: [
              [
                status[0]?.value / 100,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#3BB8FF' },
                  { offset: 1, color: '#004DFE' },
                ]),
              ],
              [1, 'rgba(0,0,0,0)'],
            ],
          },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        detail: {
          formatter: '{value}人',
          fontSize: 24,
          offsetCenter: [0, '-15%'],
          color: '#303133',
        },
        pointer: {
          icon: 'image://https://quanbu-spinning.oss-cn-hangzhou.aliyuncs.com/front/public/img/p_down_guage.png',
          length: '10%',
          width: 12,
          offsetCenter: [0, '-120%'],
          itemStyle: { color: 'auto' },
        },
        data: [{ value: status[0]?.value }],
      },
      {
        name: '下半圆背景刻度',
        type: 'gauge',
        radius: '70%',
        center: ['50%', '50%'],
        startAngle: 0,
        endAngle: -180,
        min: 0,
        max: 100,
        splitNumber: 10,
        z: 1,
        axisLine: { show: false },
        axisTick: {
          show: true,
          splitNumber: 5,
          length: 30,
          distance: -30,
          lineStyle: { color: '#999', width: 1 },
        },
        splitLine: {
          show: true,
          length: 30,
          distance: -30,
          lineStyle: { color: '#999', width: 1 },
        },
        axisLabel: { show: false },
        detail: { show: false },
        pointer: { show: false },
        data: [{ value: 0 }],
      },
      {
        name: '',
        type: 'gauge',
        radius: '75%',
        center: ['50%', '50%'],
        startAngle: 0,
        endAngle: -180,
        min: 0,
        max: 100,
        splitNumber: 10,
        z: 2,
        axisLine: {
          lineStyle: {
            width: 35,
            color: [
              [
                status[1]?.value || 0 / 100,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: '#0DC38D' },
                  { offset: 1, color: '#6EFBC7' },
                ]),
              ],
              [1, 'rgba(0,0,0,0)'],
            ],
          },
        },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        detail: {
          formatter: '{value}人',
          fontSize: 24,
          offsetCenter: [0, '25%'],
          color: '#303133',
        },
        pointer: {
          icon: 'image://https://quanbu-spinning.oss-cn-hangzhou.aliyuncs.com/front/public/img/p_up_guage.png',
          length: '10%',
          width: 12,
          offsetCenter: [0, '-120%'],
          itemStyle: { color: 'auto' },
        },
        data: [{ value: status[1]?.value || 0}],
      },
    ],
  };
}


//=======================治疗效果饼图  ================
export function getTherapeuticOutcomePieOption(resultData: MonthData[]): EChartsOption {
  const optionData: any[] = [];
  const colorList = [
    { color1: 'rgba(127,177,108,0.9)', color2: 'rgba(193,255,138,1)' },
    { color1: 'rgba(190,164,75,0.9)', color2: 'rgba(255,207,74,1)' },
    { color1: 'rgba(54,122,194,0.9)', color2: 'rgba(76,174,254,1)' },
    { color1: 'rgba(97,145,197,0.9)', color2: 'rgba(131,199,255,1)' },
  ];

  const sum = resultData.reduce((acc, item) => acc + item.value, 0);

  resultData.forEach((item) => {
    optionData.push({ value: item.value, name: item.name });
    optionData.push({
      name: '',
      value: sum / 100,
      itemStyle: { color: 'transparent' }
    });
  });

  const option: EChartsOption = {
    backgroundColor: "#ffffff",
    legend: [
      {
        orient: 'vertical',
        right: '10%',
        top: '25%',
        itemGap: 30,
        textStyle: { color: '#606266', fontSize: 12 },
        data: resultData.map(item => item.name)
      },
    ],
    tooltip: {
      trigger: 'item',
      formatter(params: any) {
        const { marker, name, value } = params;
        return name !== '' ? `${marker}${name}:${value}人` : '';
      }
    },
    series: [
      {
        type: 'pie',
        roseType: 'radius',
        radius: ['20%', '60%'],
        center: ['30%', '50%'],
        label: {
          position: 'inside',
          formatter(item: any) {
            return item.name === '' ? '' : `${item.value}人`;
          },
          color: '#ffffff',
          fontSize: 14
        },
        labelLine: { show: false },
        itemStyle: {
          normal: {
            color(params: any) {
              return colorList[Math.floor(params.dataIndex / 2)]?.color1;
            }
          }
        },
        z: 3,
        data: optionData
      },
      {
        type: 'pie',
        roseType: 'radius',
        radius: ['20%', '62%'],
        center: ['30%', '50%'],
        label: { show: false },
        labelLine: { show: false },
        itemStyle: {
          normal: {
            color(params: any) {
              return colorList[Math.floor(params.dataIndex / 2)]?.color2;
            }
          }
        },
        z: 2,
        data: optionData
      }
    ]
  };

  return option;
}
